<section id="createBill" class="ml-24 mr-24">
  <div class="font-16 line-height-56 border-b color-666">新建账单</div>
  <div class="create-bill mt-15">

    <div class="dy-flex">
      <div class="dy-fx-1 color-666 line-height-34"><span class="required">*</span>账单类型:</div>
      <div class="dy-fx-8">
        <ul class="cr-type-select clearfix">
          <li :class="{active: billType == item.code}" @click="billTypeCheck(item.code)" v-for="item in billTypeList">{{item.name}}</li>
        </ul>
      </div>
    </div>
    <div class="dy-flex mt-5">
      <div class="dy-fx-1 color-666 line-height-34">
        <span class="required">*</span><span v-if="billType == 'HT'">关联合同</span><span v-if="billType == 'TZ'">关联退租</span>:</div>
      <div class="dy-fx-8">
				<p class="line-height-34">{{ code }}</p>
        <hl-button size="small"  @on-click="showRelation">选择{{billType == 'HT' ? '合同' : '退租单'}}</hl-button>
      </div>
    </div>
    <div class="dy-flex mt-10">
      <div class="dy-fx-1 color-666 line-height-34"><span class="required">*</span>账期:</div>
      <div class="dy-fx-8 clearfix">
        <div class="pull-left" style="width: 150px;"><web-calendar type="primary" v-model="beginDate" tips="开始时间"></web-calendar></div>
        <div class="pull-left ml-10 mr-10 line-height-34">至</div>
        <div class="pull-left" style="width: 150px;"><web-calendar type="primary" v-model="endDate" tips="结束时间" @change="timeValiData"></web-calendar></div>
      </div>
    </div>
    <div class="dy-flex mt-10">
      <div class="dy-fx-1 color-666 line-height-34"><span class="required">*</span>收款截止日:</div>
      <div class="dy-fx-8 clearfix">
        <div class="pull-left" style="width: 150px;"><web-calendar type="primary" tips="收款截止时间" v-model="receivablesDate"></web-calendar></div>
      </div>
    </div>

    <div class="mt15 pt-10">
      <div class="clearfix">
        <div class="color-666 pull-left line-height-34"><span class="required">*</span>应收费项</div>
        <div class="color-primary line-height-34 pull-right cursor" @click="addexpenditure"><span class="icon-Org-account mr-5"></span>新增</div>
      </div>
      <div class="text-center border line-height-40 br-4" v-if="expenditureList.length">
        <div class="tb-title dy-flex gradient-color">
          <div class="dy-fx-3">费项名</div>
          <div class="dy-fx-2">金额(元)</div>
          <div class="dy-fx-2">税率(%)</div>
          <div class="dy-fx-2">滞纳金比例(%)</div>
          <div class="dy-fx-3">备注</div>
          <div class="dy-fx-2">操作</div>
        </div>
        <div class="tb-title dy-flex border-t" v-for="(item, index) in expenditureList">
          <div class="dy-fx-3 border-r">{{item.expense_name}}</div>
          <div class="dy-fx-2 border-r">{{item.expense_amount | formatNum}}</div>
          <div class="dy-fx-2 border-r">{{item.tax_percent == "#"?'--': item.tax_percent}}</div>
          <div class="dy-fx-2 border-r">{{item.late_fee_precent}}</div>
          <div class="dy-fx-3 border-r ellipsis-1" :title="item.expense_memo">{{item.expense_memo || '--'}}</div>
          <div class="dy-fx-2">
            <a @click="del01(index)">删除</a>
          </div>
        </div>
      </div>
      <div class="mt15 pt-10">
        <div class="clearfix">
          <div class="color-666 pull-left line-height-34"><span class="required">*</span>应退费项</div>
          <div class="color-primary line-height-34 pull-right cursor" @click="regexpenditure"><span class="icon-Org-account mr-5"></span>新增</div>
        </div>
        <div class="text-center border line-height-40 br-4" v-if="regExpenditureList.length">
          <div class="tb-title dy-flex gradient-color">
            <div class="dy-fx-3">费项名</div>
            <div class="dy-fx-2">金额(元)</div>
            <div class="dy-fx-2">税率(%)</div>
            <div class="dy-fx-2">滞纳金比例(%)</div>
            <div class="dy-fx-3">备注</div>
            <div class="dy-fx-2">操作</div>
          </div>
          <div class="tb-title dy-flex border-t" v-for="(item, index) in regExpenditureList">
            <div class="dy-fx-3 border-r">{{item.expense_name}}</div>
            <div class="dy-fx-2 border-r">{{item.expense_amount | abs | formatNum}}</div>
            <div class="dy-fx-2 border-r">{{item.tax_percent == "#"?'--': item.tax_percent}}</div>
            <div class="dy-fx-2 border-r">{{item.late_fee_precent}}</div>
            <div class="dy-fx-3 border-r ellipsis-1" :title="item.expense_memo">{{item.expense_memo || '--'}}</div>
            <div class="dy-fx-2">
              <a @click="del02(index)">删除</a>
            </div>
          </div>
        </div>
    </div>
    <div class="total-amount">
      <span class="color-666">账单金额总计：</span>
      <span style="color:rgba(234,115,61,1);">{{total | abs | formatNum}}元</span>
      <span v-if="total > 0">(应收)</span>
      <span v-if="total < 0">(应退)</span>
    </div>
    <div class="mt-15 pt-10">
      <hl-button type="primary" @on-click="shouBill">生成账单</hl-button>
    </div>
  </div>

  <!-- //确认账单弹窗 -->
  <div class="mark-bill-query" v-if="billFlag">
    <div class="bill-query br-4">
      <div class="icon-Gm-close cursor" @click="billFlag = !billFlag" style="position:absolute;right:0;top:0;height:45px;lineHeight:45px;textAlign:center;width:45px;"></div>
      <div class="bill-query-title text-center font-16">确认账单</div>
      <div class="bill-query-container">
        <div>
          <span class="color-999"><span v-if="billType == 'HT'">管理编号</span><span v-if="billType == 'TZ'">退租单号</span>：</span>
          <span class="color-666">{{code}}</span>
        </div>
        <div>
          <span class="color-999">合同名称：</span>
          <span class="color-666">{{contractName || '--'}}</span>
        </div>
        <div>
          <span class="color-999">客户名称：</span>
          <span class="color-666">{{customerName || '--'}}</span>
        </div>
        <div>
          <span class="color-999">收款截止日：</span>
          <span class="color-666">{{receivablesDate}}</span>
        </div>
        <div>
          <span class="color-999">账单金额总计：</span>
          <span class="color-666">{{total | abs}}元<span v-if="total > 0">(应收)</span><span v-if="total < 0">(应退)</span></span>
        </div>
      </div>
      <div class="bill-query-wrap-button">
        <hl-button type="primary"  @on-click="saveSubmit">确认</hl-button>
        <hl-button type="outline"  @on-click="billFlag = !billFlag">取消</hl-button>
      </div>
    </div>
  </div>

  <web-costitem :show="flag" @query="queryExpenditure" :flowtype="flowtype" ></web-costitem>

	<div class="pop-create-bill" v-if="relationFlag">
		<div class="create-box">
			<div class="title">关联{{billType == 'HT' ? '合同' : '退租单'}}</div>
			<div class="close icon-Gm-close font-12" @click="hideRelation"></div>
			<div class="content pl-24 pr-24">
				<div class="ptb-10">
					<span>客户名称：</span>
					<input type="text" class="form-control mr-10 inline" v-model="customerNameKey" style="width: 150px;">
					<hl-button size="mini" @on-click="searchCustomer">查询</hl-button>
					<hl-button size="mini" @on-click="resetButton">重置</hl-button>
				</div>
				<div class="clearfix">
					<div class="br-4 box-i-shadow line-height-40 pull-left border bg-fff" style="width: 200px;">
						<div class="text-center border-b color-gray">客户名称</div>
						<div class="ul-li">
							<vue-scroll :ops="ops" style="height: 398px;">
								<div class="color-666 company-list ellipsis-1" :class="{'n-btn-primary': item.id == customerActive, hoverBill: item.id != customerActive}" v-for="item in customerArr" @click="searchBillContract(item)">{{ item.customerName }}</div>
							</vue-scroll>
						</div>
					</div>
					<div class="br-4 box-i-shadow line-height-40 pull-right border bg-fff" style="width: 659px;">
						<div class="dy-flex text-center border-b color-gray" v-if="billType == 'HT'">
							<div class="dy-fx-1">序</div>
							<div class="dy-fx-2">合同编号</div>
							<div class="dy-fx-2">签订时间</div>
							<div class="dy-fx-2">计租时间</div>
							<div class="dy-fx-2">到期时间</div>
							<div class="dy-fx-1">状态</div>
							<div class="dy-fx-1 border-l">操作</div>
						</div>
						<div class="dy-flex text-center border-b color-gray" v-if="billType == 'TZ'">
							<div class="dy-fx-1">序</div>
							<div class="dy-fx-2">退租单号</div>
							<div class="dy-fx-2">退租时间</div>
							<div class="dy-fx-2">应收</div>
							<div class="dy-fx-2">应退</div>
							<div class="dy-fx-1">状态</div>
							<div class="dy-fx-1 border-l">操作</div>
						</div>
						<vue-scroll :ops="ops" style="height: 398px;">
							<div class="dy-flex text-center border-b" v-if="billType == 'HT'" v-for="(item, index) in contractBillArr">
								<div class="dy-fx-1">{{ index+1 }}</div>
								<div class="dy-fx-2 ellipsis-1">{{ item.mCode }}</div>
								<div class="dy-fx-2">{{ item.signTime | timestamp }}</div>
								<div class="dy-fx-2">{{ item.beginDate | timestamp }}</div>
								<div class="dy-fx-2">{{ item.endDate | timestamp }}</div>
								<div class="dy-fx-1 ellipsis-1">{{ item.auditState | contractState }}</div>
								<div class="dy-fx-1 border-l">
									<a href="javascript:;" @click="codeSet(item.mCode)">关联</a>
								</div>
							</div>
							<div class="dy-flex text-center border-b" v-if="billType == 'TZ'" v-for="(item, index) in contractBillArr">
								<div class="dy-fx-1">{{ index+1 }}</div>
								<div class="dy-fx-2 ellipsis-1">{{ item.withdrawCode }}</div>
								<div class="dy-fx-2">{{ item.withdrawDate | timestamp }}</div>
								<div class="dy-fx-2">{{ item.amountReceived }}</div>
								<div class="dy-fx-2">{{ item.amountRefund }}</div>
								<div class="dy-fx-1 ellipsis-1">{{ item.auditState | billState }}</div>
								<div class="dy-fx-1 border-l">
									<a href="javascript:;" @click="codeSet(item.withdrawCode)">关联</a>
								</div>
							</div>
						</vue-scroll>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<script src="modules/bill/scripts/costItem.js" type="text/javascript" charset="utf-8"></script>
<script src="modules/bill/scripts/createBill.js" type="text/javascript" charset="utf-8"></script>

<style media="screen">
	.pop-create-bill {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.create-box {
		width: 914px;
		background: #fff;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}
	.create-box .title {
		font-size: 16px;
		text-align: center;
		line-height: 45px;
		height: 45px;
	}
	.ul-li {
		max-height: 398px;
	}
	.create-box .close {
		position: absolute;
		right: 0;
		top: 0;
		width: 45px;
		height: 45px;
		text-align: center;
		line-height: 45px;
	}
	.create-box .content {
		background:rgba(249,249,249,1);
		padding-bottom: 20px;
	}
	.company-list {
		text-indent: 15px;
		line-height: 40px;
		height: auto;
		text-align: left;
		cursor: pointer;
		border-bottom: 1px solid #ddd;
	}
	.hoverBill:hover {
		background-color: #eee;
	}
  #createBill .icon-Gm-calendar:before {
    right: 0;
    top: 0;
  }
  .total-amount {
    height:50px;
    line-height:50px;
    background:rgba(239,239,239,1);
    padding-left: 20px;
    margin-top: 15px;
    font-weight: bold;
    font-size: 15px;
  }

  /* //确认账单 */
  .mark-bill-query {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .bill-query {
    width: 440px;
    background: #fff;
    position: relative;
  }
  .bill-query-title {
    line-height: 45px;
    height: 45px;
  }
  .bill-query-container {
    background:rgba(249,249,249,1);
    line-height: 36px;
    padding: 12px 24px;
  }
  .bill-query-wrap-button {
    display: flex;
    justify-content:space-between;
    margin: 0 40px;
    padding: 10px 0;
  }
</style>
